import React, { useState, useEffect, useRef } from 'react';

const TestReactClassComponent = (props) => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Test Component');
  const [isVisible, setIsVisible] = useState(true);
  const [data, setData] = useState(null);
  const timerRef = useRef(null);

  const fetchData = () => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
      })
      .catch(error => {
        console.error('Error:', error);  
      });
  };

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  const cleanup = () => {
    // 清理工作
    clearInterval(timerRef.current);
  };

  // componentDidMount equivalent
  useEffect(() => {
    console.log('Component mounted');
    fetchData();
    
    // componentWillUnmount equivalent
    return () => {
      console.log('Component will unmount');
      cleanup();
    };
  }, []);

  // componentDidUpdate equivalent for count changes
  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]);

  return (
    <div>
      <h1>{name}</h1>
      {isVisible && (
        <div>
          <p>Count: {count}</p>
          <button onClick={handleClick}>
            Increment
          </button>
        </div>
      )}
    </div>
  );
};

export default TestReactClassComponent;